<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 管理系统大布局 - Layui</title>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
  <script src="https://www.layuicdn.com/layui/layui.js"></script>
<!--  <link rel="stylesheet" href="../static/js/TAM/layui/src/css/layui.css">-->
<!--  <script src="../static/js/TAM/layui/src/layui.js"></script>-->
</head>
<body>
  <!--数据表显示，居中排版-->
  <div style="text-align: center">
    学生成绩表
  </div>
  <div style="text-align: center;">
    <div class="layui-inline">
      <table id="scoreTest" lay-filter="test" style="margin: 0 auto;"></table>
    </div>
  </div>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script th:inline="javascript" charset="UTF-8">
      layui.use('table', function () {
        var teachClassID = getUrlParam("teachClassID");
        // alert(teachClassID);
        var table = layui.table;
        table.render({
          elem: '#scoreTest'
          , height: 'full'
          , url: '/teachAffairManagementForTeacher/getTeachClassScoreInfoJson' //数据接口
          , where: {  // 接口的其他参数（自己定义传递的参数）
            teachClassID: teachClassID
          }
          , title: '学生成绩表'
          , page: true //开启分页
          , limit: 10  // 每页显示的条数
          , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]  //每页显示条数的可选择数目
          // ,autoSort: false //禁用前端自动排序
          , initSort: {  //初始化排序方式
            field: 'studentID' //排序字段，对应 cols 设定的各字段名
            , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
          }
          ,skin: 'line' //行边框风格
          ,even: true //开启隔行背景
          ,toolbar: ['filter', 'print', 'exports', {
            title: '提示' //标题
            ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
            ,icon: 'layui-icon-tips' //图标类名
          }]
          , cols: [
            [
                {field: 'studentID', title: '学生ID', width: 120, sort: true, align: 'center'}
              , {field: 'studentName', title: '姓名', width: 120, sort: true, align: 'center'}
              , {field: 'collegeName', title: '学院', width: 120, sort: true, align: 'center'}
              , {field: 'majorName', title: '专业', width: 120, sort: true, align: 'center'}
              , {field: 'grade', title: '年级', width: 100, sort: true, align: 'center'}
              , {field: 'classNumber', title: '班级', width: 100, sort: true, align: 'center'}
              , {field: 'courseScore', title: '分数', width: 100, sort: true, align: 'center'}
            ]
          ]
        });

        //触发排序事件
        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
          console.log(obj.field); //当前排序的字段名
          console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
          console.log(this); //当前排序的 th 对象

          //尽管我们的 table 自带排序功能，但并没有请求服务端。
          //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
          table.reload('scoreTest', {
            initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
            , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
              field: obj.field //排序字段
              , order: obj.type //排序方式
              , teachClassID: teachClassID
            }
          });
          // layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
        });
      });
    </script>

    <script>
      // 从URL中获取参数
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);//返回参数值
        return null;
      }
    </script>
<!--  </div>-->
</body>